<div class="sys-title">
    <h2>流量概览</h2>
</div>

<div class="sys-content">
    <div class="col-left">
        <div class="panel" style="min-height:720px;">
            <div class="panel-head">
                <div class="panel-title">
                    <h3>今日资源详情</h3>
                </div>
                <div class="alink"><a id="tablefull" href="javascript:void(0)"></a></div>
            </div>
            <div class="panel-body">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>资源名称</th>
                        <th>客户端IP数</th>
                        <th>资源类型</th>
                        <th>资源IP地址</th>
                        <th>今日读取量/历史平均值</th>
                        <th>今日写入量/历史平均值</th>
                        <th>今日总量/历史平均值</th>
                    </tr>
                    </thead>
                    <tbody id="page">


                    </tbody>
                </table>
            </div><!--panel-body end-->
            <div class="panel-foot">
                <div class="btns"><!-- <button class="btn btn-danger">批量删除</button> --></div>
                <div class="page" id="pageList">

                </div>
            </div><!--panel-foot end-->
        </div>
    </div>

    <div class="col-right" style="padding-left:20px;">
        <div class="panel" style="min-height:720px;">
            <div class="panel-head">
                <div class="panel-title">
                    <h3>流量概览</h3>
                </div>
            </div>
            <div class="panel-body">
                <div id="chart1" class="chart col-4">loading...</div>
                <div id="chart2" class="chart col-4">loading...</div>
                <div id="chart3" class="chart col-4">loading...</div>
                <div class="row">
                    <div class="btnbar dropdown">
                        <button class="btn btn-success">统计周期</button>
                        <ul class="dropdown-menu">
                            <li data-id="1"><span>小时</span></li>
                            <li data-id="2"><span>天</span></li>
                            <li data-id="3"><span>月</span></li>
                        </ul>
                    </div>

                    <div class="btnbar group">
                        <!-- <button>访问数</button> -->
                        <button class="active" id="amount">访问量</button>
                        <button id="number">访问次数</button>
                    </div>
                    <div id="chart4" class="chart">loading...</div>
                </div>


            </div><!--panel-body end-->
        </div>
    </div>

</div>

<div class="dialog" id="info">
    <div class="dialog-win">
        <div class="dialog-head"><span>客户端详情</span><a class="close" href="javascript:void(0);"><i
                class="icon-close"></i></a></div>
        <div class="dialog-body">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th width="5%" class="no-sort">序号</th>
                    <th>客户端IP</th>
                    <th>数据读取量</th>
                    <th>数据写入量</th>
                    <th>总量</th>
                </tr>
                </thead>
                <tbody id="ipPage">
                <!--<tr>
                    <td>1</td>
                    <td>交换服务1</td>
                    <td>172.191.223.15</td>
                    <td>300万条</td>
                    <td>1325万条</td>
                    <td>1325万条</td>
                </tr>-->
                </tbody>
            </table>
        </div><!--dialog-body end-->
        <div class="panel-foot">
            <div class="btns"><!-- <button class="btn btn-danger">批量删除</button> --></div>
            <div class="page" id="ipPageList">

            </div>
        </div>
    </div><!--dialog-win end-->
</div>


<script src="./scripts/app/safe/trafficAnalysis/trafficView.js"></script>